import React from 'react'
import { ListItem, ListInfo } from '../style'
import { connect } from 'react-redux'

class List extends React.Component {
	render() {
		const { list } = this.props;
		return (
			<div>
				{
					list.map((item) => {
						return (
							<ListItem key={item.get('id')}>
								<img className='pic' src={item.get('imgUrl')} alt=""/>
								<ListInfo>
									<h2 className='title'>{item.get('title')}</h2>
									<p className='desc'>{item.get('desc')}</p>
								</ListInfo>
							</ListItem>
						);
					})
				}
			</div>
		)
	}
}

const mapState = (state) => ({
	list: state.get('home').get('articleList')
})

export default connect(mapState)(List)
